<template>
  <div class="widget_settings_pro">
    <div class="title">菜单导航设置</div>
    <p>选择菜单</p>
    <menu-layout  @navMenu='receiveNavMenu' :nowMenuName='(formData.menu && formData.menu.name) || null' :hasAnyMenu='(formData.menu && formData.menu.id) || formData.menu_id'></menu-layout>
    <div class="content" style="margin: 10px 20px 10px;">
      <div class="el-form-item" v-if="formData.menu && formData.menu.id">
        <label class="el-form-item__label">HOT菜单</label>
        <div class="el-form-item__content"  style="flex: 1;">
          <el-select v-model="formData.hotMenuId" size="mini" @change="handleGetMenuId" clearable>
            <el-option
                v-for="item in menuList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </div>
        <div class="el-form-item" v-if="formData.menu && formData.menu.id">
          <label class="el-form-item__label">菜单高亮</label>
          <div class="el-form-item__content"  style="flex: 1;">
            <el-select v-model="formData.highMenuId" size="mini" @change="handleGetHighMenuId" clearable>
              <el-option
                  v-for="item in menuList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              ></el-option>
            </el-select>
          </div>
      </div>
        <div class="el-form-item" v-if="formData.menu && formData.menu.id && formData.highMenuId" style="margin-top: 12px">
          <label class="el-form-item__label">高亮颜色</label>
          <div class="el-form-item__content" style="flex: 1;text-align: right;line-height: 0">
            <el-color-picker
                v-model="formData.highMenuColor"
                show-alpha
                :predefine="predefineColors">
            </el-color-picker>
          </div>
        </div>
    </div>
    <ele-form-section
        labelPosition="left"
        v-model="formData"
        :request-fn="handleSubmit"
        :sections="sections"
    >
      <template v-slot:form-btn="{ btns }">
        <div class="rest-btn" @click="reset">
          <svg-icon icon-class="reset-settings"></svg-icon>
          重置配置
        </div>
      </template>
      <template v-slot:blocks="{ desc, data, field, formData }">
        <el-collapse v-model="activeNames">
          <draggable v-model="formData.templateBlockList" chosenClass="active" animation="500" filter=".forbid"
                     :preventOnFilter="false">
            <template v-for="(item, index) in formData.templateBlockList">
              <el-collapse-item title="系列" :name="index" class="game-select editForm" :key="index">
                <template slot="title">
                  <div class="custom-title">
                    <svg-icon icon-class="grid" class="icon"></svg-icon>
                  </div>
                  <span>公告内容</span>
                </template>
                <div class="form-item forbid">
                  <label>文字</label>
                  <el-input
                      type="textarea"
                      :autosize="{ minRows: 4, maxRows: 6}"
                      placeholder="请输入文本"
                      v-model="item.settings.text"
                      style="width:100%"
                  />
                  <!--                  <ele-form-quill-edit v-model="item.settings.text"></ele-form-quill-edit>-->
                </div>
                <div class="form-item forbid">
                  <label>移动端文字</label>
                  <el-input
                      type="textarea"
                      :autosize="{ minRows: 4, maxRows: 6}"
                      placeholder="请输入文本"
                      v-model="item.settings.mobile_text"
                      style="width:100%"
                  />
                  <!--                  <ele-form-quill-edit v-model="item.settings.mobile_text"></ele-form-quill-edit>-->
                </div>
                <div class="form-item forbid">
                  <label>链接</label>
                  <ele-form-custom-select v-model="item.settings.link"/>
                </div>
                <div class="form-item forbid">
                  <label>链接文案</label>
                  <el-input type="text" placeholder="请输入链接文案" v-model="item.settings.link_text"></el-input>
                </div>
                <div class="form-item">
                  <el-button  class="addBtn" @click="handleRemove(index)"><i
                      class="el-icon-remove"></i>删除内容
                  </el-button>
                </div>
              </el-collapse-item>
            </template>
          </draggable>
        </el-collapse>
        <el-button type="primary" size="small" class="addBtn" @click="addPic"><i class="el-icon-plus"></i>添加公告
        </el-button>
      </template>

      <template v-slot:customMenuBlocks="{ desc, data, field, formData }">
        <el-collapse v-model="activeNames1">
          <draggable v-model="formData.customMenuList" chosenClass="active" animation="500" filter=".forbid" :preventOnFilter="false">
            <template v-for="(item, index) in formData.customMenuList">
              <el-collapse-item title="自定义菜单" :name="index" class="game-select editForm" :key="index">
                <div class="form-item forbid">
                 <label>菜单</label>
                <el-select v-model="item.menuId" size="mini" @change="handleGetCustomMenuId($event, index, sindex)" clearable>
                  <el-option
                      v-for="item in menuList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                  ></el-option>
                </el-select>
                </div>
                <div class="list-wrap" style="min-height: 100px" v-if="item.menuId">
                  <draggable v-model="item.bannerList" chosenClass="active" animation="100" filter=".forbid" :preventOnFilter="false">
                    <div
                        class="image-item"
                        v-for="($item, $index) in item.bannerList"
                        :key="$index"
                    >
                      <div class="img">
                        <el-image  v-img-host="{url: fillImg($item.src)}" :src="bgPic"  alt="" class="l-img" />
                        <div class="img_mask" v-if="$item.flag">
                          <svg-icon class="icon" icon-class="checked"/>
                        </div>
                        <div class="label">
                          <el-tooltip class="item" effect="dark" content="删除" placement="top">
                            <div @click.stop.prevent="actionDel($index, index)">
                              <svg-icon icon-class="remove"></svg-icon>
                            </div>
                          </el-tooltip>
                        </div>
                      </div>
                      <div class="form-item forbid" style="margin-top: 0">
                        <label>链接</label>
                        <ele-form-custom-select v-model="$item.link"/>
                      </div>
                      <div class="form-item forbid" style="margin-top: 0;width: 100%">
                        <label>文字</label>
                        <el-input
                            placeholder="请输入文本"
                            v-model="$item.text"
                            style="width:100%"
                        />
                      </div>
                    </div>
                  </draggable>
                  <ele-form-upload-plus-file title="新增banner" type="button" @input="getBanner($event, index)" :multiple="true" imageHeight="133px"/>
                </div>
                <div class="form-item">
                  <el-button  class="addBtn" @click="handleRemoveCustom(index)"><i
                      class="el-icon-remove"></i>删除内容
                  </el-button>
                </div>
              </el-collapse-item>
            </template>
          </draggable>
        </el-collapse>
        <el-button type="primary" size="small" class="addBtn" @click="addCustomMenu"><i class="el-icon-plus"></i>添加自定义菜单内容</el-button>
      </template>
    </ele-form-section>
  </div>
</template>

<script>
import bgPic from '@/assets/images/bg-grey.png';
import draggable from 'vuedraggable';
import MenuLayout from './menuLayout';
import {debounce, deepClone} from '@/utils/utils';
import {getNavigation} from '@/api/menu-navigation';
const predefineColors = [
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    'rgba(255, 69, 0, 0.68)',
    'rgb(255, 120, 0)',
    'hsv(51, 100, 98)',
    'hsva(120, 40, 94, 0.5)',
    'hsl(181, 100%, 37%)',
    'hsla(209, 100%, 56%, 0.73)'
];

export default {
    name: 'navigationForm',
    props: {
        value: {
            type: Object,
            default: () => ({})
        }
    },
    watch: {
        value: {
            handler (newVal, oldVal) {
                this.formData = JSON.parse(newVal.styleJson);
            },
            immediate: false,
            deep: true
        },
        formData: {
            handler (newVal, oldVal) {
                if (newVal.menu) {
                    this.setData();
                }
            },
            immediate: false,
            deep: true
        },
        'formData.menu': {
            handler (newVal, oldVal) {
                this.getAllMenu();
            },
            immediate: true,
            deep: true
        }
    },
    computed: {
        siteId () {
            return this.$store.state.user.siteId;
        }
    },
    data () {
        return {
            bgPic,
            predefineColors,
            hotMenuId: '',
            hotMenuIndex: null,
            highMenuId: '',
            highMenuColor: '',
            menuList: [],
            pageCount: 1,
            formData: this.value ? JSON.parse(this.value.styleJson) : {},
            originMenu: this.value ? JSON.parse(this.value.styleJson)['menu'] : {},
            originValue: this.value,
            originFormData: this.value ? JSON.parse(this.value.styleJson) : {},
            activeNames: [],
            activeNames1: [],
            uploadPath: process.env.VUE_APP_BASE_API + '/upload-file',
            sections: [
                {
                    // 分区标题
                    title: '公告栏',
                    // 分区表单项
                    // 和group不同，仅将vue-ele-form的formDesc放入section中
                    formDesc: {
                        'is_announce_show': {
                            type: 'switch',
                            break: true,
                            label: '开启公告栏'
                        },
                        'is_announce_show_only_on_home': {
                            type: 'switch',
                            break: true,
                            label: '仅首页显示公告栏'
                        },
                        'announce_title': {
                            type: 'ele-form-quill-edit',
                            label: '公告栏文案'
                        },
                        'announce_src': {
                            type: 'ele-form-custom-select',
                            label: '链接'
                        },
                        'blocks': {}
                    }
                },
                {
                    title: '自定义菜单内容',
                    formDesc: {
                        'customMenuBlocks': {}
                    }
                },
                {
                    title: '顶部logo与图标',
                    formDesc: {
                        'shop_logo': {
                            label: 'logo图片',
                            type: 'ele-form-upload-plus-file',
                            attrs: {
                                title: '添加图片',
                                desc: '建议尺寸：宽度250px, 建议上传LOGO图片的尺寸为设置的LOGO宽度的2倍'
                            }
                        },
                        'alignment': {
                            type: 'select',
                            label: 'PC端logo位置',
                            options: [
                                {text: '居中', value: 'center'},
                                {text: '中间，菜单左边', value: 'center-left'},
                                {text: '中间，菜单收起', value: 'center-drawer'},
                                {text: '居左，菜单换行', value: 'left'},
                                {text: '居左，菜单同行', value: 'left-inline'}
                            ]
                        },
                        'cart_style': {
                            type: 'select',
                            label: '购物车形状',
                            options: [
                                {text: '购物车', value: 'cart'},
                                {text: '购物袋', value: 'bag'}
                            ]
                        },
                        'is_account_show': {
                            type: 'switch',
                            break: true,
                            label: '个人中心'
                        },
                        'is_search_show': {
                            type: 'switch',
                            break: true,
                            label: '搜索'
                        },
                        'is_header_fixed': {
                            type: 'switch',
                            break: true,
                            label: '固定悬浮导航栏'
                        },
                        'is_fixed_header': {
                            type: 'switch',
                            break: true,
                            label: '内容置于菜单下'
                        }
                    }
                },
                {
                    title: '颜色字体设置',
                    formDesc: {
                        'menu_font_size': {
                            type: 'slider',
                            label: () => { return `字体大小  ${this.formData.menu_font_size}px`; },
                            attrs: {
                                min: 14,
                                max: 60
                            }
                        },
                        'menu_indent': {
                            type: 'slider',
                            label: () => { return `字体间距  ${this.formData.menu_indent}px`; },
                            attrs: {
                                min: 0,
                                max: 60
                            }
                        },
                        'announce_color': {
                            type: 'color',
                            label: '公告栏字体',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'announce_bg_color': {
                            type: 'color',
                            label: '公告栏背景',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'menu_color': {
                            type: 'color',
                            label: 'PC菜单栏字体',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'menu_bg_color': {
                            type: 'color',
                            label: 'PC菜单栏背景',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'menu_bg_hover_color': {
                            type: 'color',
                            label: 'PC菜单栏Hover背景',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'menu_bg_down_color': {
                            type: 'color',
                            label: 'PC下拉菜单背景',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'menu_bg_down_text_color': {
                            type: 'color',
                            label: 'PC下拉菜单字体',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'logo_color': {
                            type: 'color',
                            label: 'logo栏字体',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'logo_icon_color': {
                            type: 'color',
                            label: 'logo栏图标',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'logo_bg_color': {
                            type: 'color',
                            label: 'logo栏背景',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        }
                    }
                }
            ]
        };
    },
    methods: {
        getBanner (e, index) {
            if (e.length) {
                if (this.formData.customMenuList[index].bannerList.length + e.length > 4) {
                    this.$message.error('最多添加4张图片');
                    return;
                }
                e.forEach(item => {
                    this.formData.customMenuList[index].bannerList.push({
                        text: '',
                        'link': null,
                        'link_text': 'Shop Now',
                        src: item.url
                    });
                });
            }
            console.log(e, index);
        },
        actionDel (sindex, index) {
            console.log(index, sindex, this.formData.customMenuList[index].bannerList[sindex]);
            this.formData.customMenuList[index].bannerList.splice(sindex, 1);
        },
        fillImg (src) {
            const match = /(http|https):\/\/([\w.]+\/?)\S*/;
            return !match.test(src) ? `https://tlkj-item-pic.oss-cn-beijing.aliyuncs.com${src}` : src;
        },
        handleGetHighMenuId () {
            this.highMenuIndex = this.menuList.findIndex(item => item.id === this.formData.highMenuId);
            if (!('highMenuIndex' in this.formData)) {
                this.$set(this.formData, 'highMenuIndex', this.highMenuIndex);
            } else {
                this.formData.highMenuIndex = this.highMenuIndex;
            }
        },
        handleGetMenuId () {
            this.hotMenuIndex = this.menuList.findIndex(item => item.id === this.formData.hotMenuId);
            if (!('hotMenuIndex' in this.formData)) {
                this.$set(this.formData, 'hotMenuIndex', this.hotMenuIndex);
            } else {
                this.formData.hotMenuIndex = this.hotMenuIndex;
            }
        },
        handleGetCustomMenuId (e, index, sindex) {
            console.log(8888, e, index, sindex);
            this.formData.customMenuList[index].menuIndex = this.menuList.findIndex(item => item.id === this.formData.customMenuList[index].menuId);
        },
        getAllMenu () {
            if (this.formData.menu && this.formData.menu.id) {
                getNavigation(this.siteId, this.formData.menu.id).then(res => {
                    const {data} = res;
                    const list = data.navigationList;
                    this.menuList = list.map(item => {
                        return {
                            id: item.id,
                            name: item.name
                        };
                    });
                    this.handleGetMenuId();
                    this.handleGetHighMenuId();
                // this.menuList = data.records;
                });
            } else {
                this.menuList = [];
                this.formData.hotMenuId = '';
                this.formData.hotMenuIndex = null;
            }
        },
        receiveNavMenu (data) {
            this.$set(this.formData, 'menu', data);
            this.$set(this.formData, 'menu_id', data.id);
        },
        addPic () {
            this.formData.templateBlockList.push({
                'type': 'announcement',
                'settings': {
                    'text': 'Get 10% off your first purchase when you subscribe for the first time!!',
                    'mobile_text': 'Get 10% off your first purchase when you subscribe for the first time!',
                    'countdown_time': 1,
                    'link': null,
                    'link_text': ''
                }
            });
        },
        addCustomMenu () {
            console.log(this.formData);
            this.formData.customMenuList.push({
                menuId: null,
                menuIndex: null,
                bannerList: []
            });
        },
        handleRemoveCustom (index) {
            this.formData.customMenuList.splice(index, 1);
        },
        handleRemove (index, record) {
            this.formData.templateBlockList.splice(index, 1);
        },
        handleResponse (response, file, fileList) {
            return response;
        },
        handleSubmit (data) {
            return Promise.resolve();
        },
        reset () {
            this.pageCount = 0;
            this.$emit('resetData', this.value);
        },
        setData: debounce(function () {
            let data = deepClone(this.value);
            data.styleJson = JSON.stringify(this.formData);
            this.$store.commit('SET_PROJECT_DATA', data);
        }, 600)
    },
    components: {
        MenuLayout,
        draggable
    },
    mounted () {
        if (!('menu_indent' in this.formData)) {
            this.$set(this.formData, 'menu_indent', 0);
        }
        if (!('hotMenuId' in this.formData)) {
            this.$set(this.formData, 'hotMenuId', '');
        }
        if (!('hotMenuIndex' in this.formData)) {
            this.$set(this.formData, 'hotMenuIndex', null);
        }
        if (!('highMenuId' in this.formData)) {
            this.$set(this.formData, 'highMenuId', '');
        }
        if (!('highMenuIndex' in this.formData)) {
            this.$set(this.formData, 'highMenuIndex', null);
        }
        if (!(('menu_bg_down_color') in this.formData)) {
            this.$set(this.formData, 'menu_bg_down_color', '#fff');
        }
        if (!(('menu_bg_down_text_color') in this.formData)) {
            this.$set(this.formData, 'menu_bg_down_text_color', '#000');
        }
        if (!(('customMenuList') in this.formData)) {
            this.$set(this.formData, 'customMenuList', []);
        }
        // this.$set(this.formData, 'menu', {name: '111'});
    }
};
</script>

<style scoped lang="scss">
.list-wrap {
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 20px;

  .image-item {
    width: 100%;
    position: relative;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    .img_mask {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      border: 2px solid #1F7DF8;
      background-color: rgba(0, 0, 0, 0.3);

      .icon {
        position: absolute;
        width: 40px;
        height: 40px;
        top: 50%;
        left: 50%;
        margin-left: -20px;
        margin-top: -20px;
      }
    }

    .img {
      position: relative;
      .label{
        display: none;
      }

      .l-img {
        width: 100px;
        height: 133px;
        object-fit: cover;
      }

      &:hover {
        .label {
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          border: 1px solid #1F7DF8;
          background-color: rgba(0, 0, 0, 0.3);
          font-size: 16px;
          color: #fff;
          .item{
            width: 100%;
            position: absolute;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.3);
            text-align: center;
          }
        }
      }
    }
  }
}
.form-item-inline{
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
  color: #606266;
  height: 32px;
  margin-bottom: 10px;
}
.editForm{
  margin-bottom: 10px;
  .form-item{
    margin-top: 10px;
    label {
      display: block;
      height: 32px;
      line-height: 32px;
    }
  }
  ::v-deep .el-collapse-item__content{
    border: 1px solid #d8deec;
    border-top:0;
    padding-left: 10px;
  }
}
.addBtn{
  width: 100%;
}
.title{
  width: 100%;
  padding: 20px;
  background: #f6f7f9;
}
p{
  color: #606266;
  font-size: 14px;
  padding: 10px 0 5px 20px;
}
</style>
